<!--员工月考勤记录详情(每天)-->
<template>

  <div class="app-container">
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
    >
      <el-table-column label="考勤日期" align="center" prop="workTime"/>
      <!--ToDo-->
      <el-table-column label="组别" align="center" prop="zubie"/>
      <el-table-column label="岗位" align="center" prop="postName"/>
      <el-table-column label="班次" align="center" prop="shiftName"/>
      <el-table-column label="出勤" align="center" prop="abnormalAttendance"/>

      <el-table-column label="普通迟到次数" align="center" prop="normallyLate"/>
      <el-table-column label="一般迟到次数" align="center" prop="usuallyLate"/>
      <el-table-column label="严重迟到次数" align="center" prop="severelyLate"/>
      <el-table-column label="早退次数" align="center" prop="leaveEarly"/>
      <el-table-column label="旷工" align="center" prop="absenteeism"/>
<!--      <el-table-column label="操作" align="center">
        <template scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >明细
          </el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 10"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[10]"
      @pagination="getTableRecords"
    />

    <!--  明细  -->
    <el-dialog :title="detailAttendance.title" :visible.sync="detailAttendance.open" width="30%" append-to-body>
      <div>
        <el-table :data="detailAttendance.data" v-loading="detailAttendance.loading" style="width:100%;height: 100%" class="el-table-filter">
          <el-table-column label="通行时间" prop="dateTime" min-width="140" align="center"/>
          <el-table-column label="设备编号" prop="address" min-width="140" align="center"/>
        </el-table>
      </div>
      <div style="text-align: right">
        <el-button @click="onCancel">取消</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>

import {getStaffAttendanceMonthList} from "@/api/job/attendance/attendanceMonth";
import {listAttendancePassRecord} from "@/api/job/attendance/attendanceMonth";


export default {
  name: "index",
  data() {
    return {
      loading: false,
      total: 0,
      tableData: [],
      detailAttendance:{},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workTime: this.$route.query.workTime,
        deptId: this.$route.query.deptId,
        idCard: this.$route.query.idCard,
      },
    }
  },
  created() {
    this.getTableRecords();
  },
  methods: {
    // 获取表格数据
    getTableRecords() {
      this.loading = true;
      getStaffAttendanceMonthList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleView(row) {
      // console.log(this.queryParams.workTime)
      let requestParam = {
        workTime  : this.queryParams.workTime,
        idCard : row.idCard
      }
      this.detailAttendance.loading = true;
      this.detailAttendance.open = true;
      this.detailAttendance.title = "通行时间明细";
      listAttendancePassRecord(requestParam).then( response => {
        this.detailAttendance.loading = false;
        this.detailAttendance.data =  response.data;
      })
    },
    onCancel(){
      this.detailAttendance.loading = false;
      this.detailAttendance.open = false;
    },
  }
}
</script>

<style scoped>

</style>
